<!DOCTYPE html>
{% load static %}
{% load custom_filters %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据页面</title>
    <link rel="stylesheet" href="{% static 'bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/generic.css' %}">
    <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
    <script src="{% static 'js/chart.js' %}"></script>
    <script src="{% static 'bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <div class="card mb-4">
        <div class="card-header">预选数据</div>
        <!-- 大的div容器，用于显示selected_data_ls -->
        <div class="card-body" id="selected-data-container" style="border: 1px solid #ddd; padding: 10px; margin-bottom: 20px;"></div>
    </div>
    <div class="card mb-4">
        <div class="card-header">全部数据</div>
        <!-- MkData表格，包含分页和多选功能 -->
        <form class="card-body" id="data-form" method="post" action="{% url 'select_data' %}">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"> 全选</th>
                        <th>文件名</th>
                        <th>周期</th>
                        <th>最后修改时间</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>数量</th>
                        <th>标的</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in data_s %}
                        <tr>
                            <td><input type="checkbox" name="selected_names" value="{{ item.name }}"></td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.interval }}</td>
                            <td>{{ item.data_modified_time|local_time }}</td>
                            <td>{{ item.start_time|local_time }}</td>
                            <td>{{ item.end_time|local_time }}</td>
                            <td>{{ item.number }}</td>
                            <td>{{ item.symbol }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

            <!-- 分页导航 -->
            <div class="pagination">
                {% if data_s.has_previous %}
                    <a href="?page=1" style="margin: 5px;">第一页</a>
                    <a href="?page={{ data_s.previous_page_number }}" style="margin: 5px;">上一页</a>
                {% endif %}

                <span style="margin: 5px;">第{{ data_s.number }}页，共{{ data_s.paginator.num_pages }}页</span>

                {% if data_s.has_next %}
                    <a href="?page={{ data_s.next_page_number }}" style="margin: 5px;">下一页</a>
                    <a href="?page={{ data_s.paginator.num_pages }}" style="margin: 5px;">最后</a>
                {% endif %}
            </div>

            <!-- 确认按钮 -->
            <button type="submit" style="margin-left: 10px; border: 1px solid #ccc;border-radius: 5px;cursor: pointer;">确认</button>
        </form>
    </div>
    <script>
        function draw_card(show_data) {
            const container = document.getElementById('selected-data-container');
            container.innerHTML = '';
            show_data.forEach(data => {
                const div = document.createElement('div');
                div.className = 'selected-data-item';
                div.style.padding = '5px';
                div.style.margin = '5px';
                div.style.border = '1px solid #ccc';
                div.textContent = data;

                const deleteButton = document.createElement('button');
                deleteButton.className = 'delete-data';
                deleteButton.textContent = 'x';
                deleteButton.dataset.name = data;

                div.appendChild(deleteButton);
                container.appendChild(div);
            });
        }
        window.onload = function () {
            const selected_data_ls = {{ selected_data_ls|safe }}
            draw_card(selected_data_ls);
        };
        // 全选/取消全选功能
        $('#select-all').on('change', function() {
            $('input[name="selected_names"]').prop('checked', this.checked);
        });


        // 提交表单通过AJAX请求
        $('#data-form').on('submit', function(event) {
            event.preventDefault();  // 阻止默认的表单提交行为

            // 获取表单数据
            const formData = new FormData(this);

            // 发送AJAX请求
            fetch("{% url 'select_data' %}", {
                method: 'POST',
                body: formData,
                headers: {}
            })
            .then(response => response.json())  // 假设后端返回JSON数据
            .then(data => {
                // 处理返回的数据，更新页面内容，返回的数据为variable
                if ("model_data" in data) {
                    draw_card(data.model_data.lab_var_part2_2.selected_data_ls);
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });

        // 删除按钮点击事件
        $('#selected-data-container').on('click', '.delete-data', function() {
            const dataName = $(this).data('name');  // 获取被删除项的name
            // 发送AJAX请求到后端进行删除
            fetch("{% url 'delete_data' %}", {
                method: 'POST',
                body: JSON.stringify({ name: dataName }), // 发送name作为删除标识
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                // 处理返回的数据，更新页面内容，返回的数据为variable
                if ("model_data" in data) {
                    draw_card(data.model_data.lab_var_part2_2.selected_data_ls);
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>



